import React, { useState, useEffect, useMemo } from 'react';
import { cline, uJob, Wait, CkUsn, is_empty, obj_empty, NuiBt, useHigh } from 'sui';
import { useStep } from 'use/step';
import { useScan } from 'use/scan';
import { StepTitle } from 'base/ctl/base';
import { MainMenu } from 'base/ctl/menu';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { g_wsn, g_db } from 'db/state';
import { loc } from 'local/index.js';
import { clear_info } from 'use/info';
import { DlgLog } from 'base/ctl/log';
import { DlgBoxTp } from 'base/ctl/box';
import { DlgRange, reload } from './ctl';
import { ck_range, StepView } from './base';
import { box_name } from '../cmd';

const fix_esop = () => {
    return [
        {stepcode: 5, stepdes: <div>用扫码枪扫描<span className="text-red-600">箱子</span>二维码</div>},
        {stepcode: 6, stepdes: "选择内外圈"},
        {stepcode: 108, stepdes: <div>扫描轴承码</div>},
    ];
};

const ClientView = ({ umd, wsn, hreturn }) => {
    const [wait, setWait] = useState(false);
    const [open_menu, openMenu] = useState(false);
    const [open_ck, openCk] = useState(false);
    const [open_log, openLog] = useState(false);
    const [open_range, openRange] = useState(false);
    const [opt, setOpt] = useState();
    const [high] = useHigh(10, 200)

    useScan(wsn, umd);

    useEffect(() => {
        if (!wsn) {
            return;
        }

        umd.setEsop(fix_esop());
        reload(null, setOpt);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [wsn]);

    const getNum = useMemo(() => {
        const info = umd.info;
        if (is_empty(info)) {
            return 0;
        }

        if (obj_empty(opt)) {
            return 0;
        }

        let ret = 0;

        info.forEach(d => {
            if (ck_range(opt, d)) {
                ret += 1;
            }
        });

        return ret;
    }, [umd.info, opt]);

    const hfin = () => {
        umd.clear();
        clear_info();
    };

    const hout = (user) => {
        const num = getNum;
        if (num > 0) {
            umd.setErr("合格品没有挑选完成");
            return;
        }

        setWait(true);

        uJob(null, "away/scrap",
            {
                line: cline(),
                box: g_db.box(),
                tp: g_db.boxtp(),
            }, r => {
                setWait(false);
                umd.setErr("");
                hfin();
            }, e => {
                umd.setErr("修改失败");
                setWait(false);
            });
    };

    const menu = [{
        label: "重新开始",
        name: "clear",
        hcmd: () => hfin(),
    }, {
        label: loc("base_157"),
        name: "log",
        hcmd: () => openLog(true),
    }];

    const dis = () => umd.get("state") !== "pout";

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between">
                <div className="inline-flex">
                    <div className="ml-2 mr-4">
                        <MainMenu value={menu} open={open_menu} setOpen={openMenu}/>
                    </div>
                    <Title value={g_wsn()} sub="挑出合格单圈" width="w-64"/>
                    <Title value={umd.get("box")} sub={box_name()} width="w-56"/>
                    <Title value={getNum} sub="合格数" width="w-56"/>
                    <Title value={umd.get("psn")} sub="轴承码" width="w-64"/>
                </div>
                <div className="inline-flex">
                    <NuiBt color="red" className="mt-1 ml-4 mr-4 w-px-next" hcmd={() => openCk(true)} disabled={dis()}>
                        <div className="text-2xl">报废</div>
                    </NuiBt>
                    <NuiBt color="green" className="mt-1 ml-4 mr-4 w-px-next" hcmd={() => openRange(true)} disabled={dis()}>
                        <div className="text-2xl">设定合格范围</div>
                    </NuiBt>
                    <NuiBt color="teal" className="mt-1 ml-4 mr-4 w-px-next" hcmd={hreturn}>
                        <div className="text-2xl">返回</div>
                    </NuiBt>
                </div>
            </div>
            <div className="flex flex-row items-start mt-1">
                <div className="flex flex-col w-full">
                    <div className="inline-flex justify-between my-4 mr-1">
                        <StepTitle umd={umd} opt={opt}/>
                        <NuiBt color="green" className="mt-1 ml-4 w-px-next" hcmd={hfin} disabled={dis()}>
                            <div className="text-2xl">完成挑选</div>
                        </NuiBt>
                    </div>
                    <div style={{ height: `${high - 310}px`, width: "100%" }} className="my-1 border">
                        <StepView umd={umd} opt={opt}/>
                    </div>
                </div>
            </div>
            <div className="inline-flex items-center justify-between">
                <div className="w-full mr-2 mt-2 border border-white rounded bg-white justify-between">
                    <div className="ml-2 font-bold text-xl text-red-600 h-12">{umd.get("err")}</div>
                </div>
                <div className="flex justify-center ml-2 w-32">
                    <Time up={true}/>
                </div>
            </div>
            <DlgLog open={open_log} setOpen={openLog}/>
            <DlgBoxTp umd={umd} open={umd.open_box_tp} setOpen={umd.openBoxTp}/>
            <DlgRange open={open_range} setOpen={openRange} hcmd={() => reload(null, setOpt)} cur={opt}/>
            <CkUsn open={open_ck} setOpen={openCk} hcmd={hout} level={3}/>
            <Wait wait={wait}/>
        </div>
    );
};

const DataClient = ({ line, wsn, hreturn }) => {
    const umd = useStep(line, wsn);

    if (g_db.is_stop_scan()) {
        g_db.start_scan();
    }

    return <ClientView umd={umd} wsn={wsn} hreturn={hreturn}/>;
};

export {DataClient};
